import classNames from 'classnames'
import './index.scss'
import {useMemo, useState} from "react";
import {billTypeToName} from "@/contants";
import Icon from "@/components/Icon";

const DailyBill = ({date, billList}) => {
    // 控制展开、收起
    const [status, setStatus] = useState(false);

    // 计算选择月统计的数据
    const dayData = useMemo(() => {
        // 如果该月份没有数据
        if (!billList) return {income: 0, pay: 0, total: 0}
        // 支出 / 收入 / 余额
        const pay = billList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0);
        const income = billList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0);
        return {
            pay,
            income,
            total: pay + income
        }
    }, [billList]);

    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{date}</span>
                    <span className={classNames('arrow', status && 'expand')}
                          onClick={() => setStatus(!status)}></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{dayData.pay.toFixed(2)}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{dayData.income.toFixed(2)}</span>
                    </div>
                    <div className="balance">
                        <span className="money">{dayData.total.toFixed(2)}</span>
                        <span className="type">结余</span>
                    </div>
                </div>
            </div>
            {/* 单日列表 */}
            <div className="billList" style={{display: status ? 'block' : 'none'}}>
                {billList.map(item => {
                    return (
                        <div className="bill" key={item.id}>
                            {/* 图标 */}
                            <Icon type={item.useFor}/>
                            <div className="detail">
                                <div className="billType">{billTypeToName[item.useFor]}</div>
                            </div>
                            <div className={classNames('money', item.type)}>
                                {item.money.toFixed(2)}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
export default DailyBill